<template>
  <div>
    <el-row>
      <el-col :span="5">
        &nbsp;
      </el-col>
      <el-col :span="14">
        <div style="border: 1px solid #cac6c6; padding: 10px; border-radius: 5px;">
          <div style="height: 70px">
            类型:
            <el-radio-group v-model="anime_type">
              <el-radio-button label="无"></el-radio-button>
              <el-radio-button label="奇幻"></el-radio-button>
              <el-radio-button label="历史"></el-radio-button>
              <el-radio-button label="运动"></el-radio-button>
              <el-radio-button label="音乐"></el-radio-button>
              <el-radio-button label="推理"></el-radio-button>
            </el-radio-group>
          </div>
          <hr style="background-color: #e5e5e5; height:1px; border:none;">
          <div style="height: 70px">
            地区:
            <el-radio-group v-model="anime_area">
              <el-radio-button label="无"></el-radio-button>
              <el-radio-button label="中国"></el-radio-button>
              <el-radio-button label="美国"></el-radio-button>
              <el-radio-button label="日本"></el-radio-button>
            </el-radio-group>
          </div>
          <hr style="background-color: #e5e5e5; height:1px; border:none;">
          <div style="height: 70px">
            年份:
            <el-radio-group v-model="anime_date">
              <el-radio-button label="无"></el-radio-button>
              <el-radio-button label="2024"></el-radio-button>
              <el-radio-button label="2023"></el-radio-button>
              <el-radio-button label="2022"></el-radio-button>
              <el-radio-button label="2021"></el-radio-button>
              <el-radio-button label="2020及2020之前"></el-radio-button>
            </el-radio-group>
          </div>
          <hr style="background-color: #e5e5e5; height:1px; border:none;">
          <div style="height: 70px">
            排序:
            <el-radio-group v-model="anime_order">
              <el-radio-button label="默认排序"></el-radio-button>
              <el-radio-button label="开播时间"></el-radio-button>
              <el-radio-button label="观看次数"></el-radio-button>
            </el-radio-group>
          </div>
          <hr style="background-color: #e5e5e5; height:1px; border:none;">
          <div style="height: 70px">
            <el-button @click="searchAnime">搜索</el-button>
          </div>
        </div>
        <div v-for="(item, index) in animeList" style="display: inline-block; margin-top: 30px; margin-left: 15px" @click="$router.push(`/video/${item.animeVideoid}`)">
          <img :src="item.animeCover" style="width: 160px; height: 220px">
          <div style="font-size: 15px"> {{ item.animeName }} </div>
          <div style="font-size: 13px"> {{ item.animeCount }}话 </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listAnime } from '@/api/anime'

export default {
  data () {
    return {
      anime_type: '无',
      anime_area: '无',
      anime_date: '无',
      anime_order: '默认排序',
      animeList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        animeName: null,
        animeIndex: null,
        animeCount: null,
        animePath: null,
        animeWatchCount: null,
        animeCommentsCount: null,
        animeThumbCount: null,
        animeStarCount: null,
        animeDate: null,
        animeType: null,
        animeArea: null
      }
      //
    }
  },
  async created () {
    const res = await listAnime()
    this.animeList = res.data.rows
  },
  methods: {
    async searchAnime () {
      this.queryParams.animeType = (this.anime_type === '无' ? null : this.anime_type)
      this.queryParams.animeDate = (this.anime_date === '无' ? null : new Date(`${this.anime_date}-01-01`).toLocaleDateString())
      this.queryParams.animeArea = (this.anime_area === '无' ? null : this.anime_area)
      // console.log(this.queryParams)
      const res = await listAnime(this.queryParams)
      this.animeList = res.data.rows
    }
  }
}
</script>

<style scoped lang="less">

</style>
